<script>

import UploadDialog from "/src/views/manage/functional/file/clientImage/compoents/UploadDialog.vue";

export default {
  components: {UploadDialog},
  data() {
    return {
      uploadLoading: false,
      bodyData: {
        content: [],
        number: 1,
        size: 5,
        totalElements: 1,
        totalPage: 1,
      },
      requestParam: {
        data: {
          and: [{
            field: "groupCode",
            operatorCode: "eq",
            value: "clientImage"
          }]
        },
        pageNumber: 1,
        pageSize: 100,
      },
    }
  },
  mounted() {
    this.getBodyData();
  },
  methods: {
    getBodyData() {
      this.$kt.requestSecurity.send({
        uri: "/functional-file-web/admin/functionalFile/getBodyData",
        data: this.requestParam,
        stateSuccess: (res) => {
          let bodyData = res.data;
          // 根据code字母排序
          bodyData.content.sort((a, b) => {
            return a.code.localeCompare(b.code);
          });
          this.bodyData = bodyData;

          setTimeout(() => {
            this.uploadLoading = false;
          }, 500);
        },
        stateFail: (err) => {
          this.$message.error(err.errMsg);
          setTimeout(() => {
            this.uploadLoading = false;
          }, 500);
        }
      });
    },
    openUploadDialog() {
      this.$refs.uploadDialog.open({
        groupCode: "clientImage"
      });
    }
  }
}
</script>

<template>
  <div>
    <div class="img-box" style="border-color: rgba(0,0,0,0)">
      <div style="padding: 20px 20px 0 20px">
        <div>
          <el-image
              @click="openUploadDialog()"
              v-loading="uploadLoading"
              class="img img-upload"
              src="/upload.svg"
              fit="fill"
          ></el-image>
        </div>
        <div style="height: 10px"></div>
        <div class="code">-</div>
      </div>
      <div style="text-align: center;padding: 5px;font-size: 12px;color:#666666">-</div>
    </div>

    <div v-for="item in bodyData.content"
        class="img-box img-box-a">
      <div style="padding: 20px 20px 0px 20px">
        <div>
          <el-image
              class="img"
              :src="$kt.file.visit(item.id)"
              fit="fill"
          ></el-image>
        </div>
        <div style="height: 10px"></div>
        <div class="code">{{item.code}}</div>
        <div style="text-align: center;font-size: 12px;color:#666666">{{$kt.util.readableStorageReadMode(item.size)}}</div>
      </div>
      <div style="text-align: center;padding: 5px;font-size: 12px;color:#666666">ID：{{item.id}}</div>
    </div>
  </div>
  <footer class="footer">
    此分组的图片，都有缩略图，所以在客户端显示时，先显示缩略图，并高斯模糊，随后递进至原图
  </footer>

  <upload-dialog
      @startUpload="uploadLoading = true"
      @endUpload="getBodyData"
      ref="uploadDialog"></upload-dialog>
</template>

<style lang="scss" scoped>
.footer{
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  color: #FFFFFF;
  background-color: rgba(0,0,0,.8);
}

.img-box {
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin: 10px;
  .img {
    display: inline-block;
    width: 180px;
    height: 180px;
  }
  .code{
    text-align: center;
    font-size: 20px;
    font-weight: lighter;
    border-top: 1px solid #ccc;
  }
}

.img-upload{
  border: 1px dashed #ccc;
  border-radius: 55%;
  background-color: #f5f5f5;
  cursor: pointer;
}

.img-upload:hover{
  transform: scale(.98);
}

.img-upload:active{
  transform: scale(.96);
}

.footer{
  color: rgba(255,255,255,.7);
  font-size: 12px;
  letter-spacing: 1px;
}

.img-box-a:hover{
  transform: scale(1.02);
  border-color: rgba(0,0,0,0);
  box-shadow: 0 0 10px rgba(0,0,0,.1);
}
</style>